<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册账号</title>
    <link rel="stylesheet" href="css/window.css">
</head>
<body>
<span class="close-btn" onclick="closeWindow()">&times;</span>
<main class="container">

    <div class="container-left">
        <div class="logo-container">
            <div class="header-container">
                <p><font size="8" color="white">工&nbsp;程&nbsp;软&nbsp;件&nbsp;研&nbsp;发&nbsp;中&nbsp;心</font></p>
            </div>
        </div>
        <div class="Qr-code-container">
            <img src="imgs/index/1.png" class="Qr-code">
        </div>
    </div>

    <!-- 表单 -->
    <div class="container-right">
        <form class="form" action="" method="get">
            <!-- 表单背景图 -->
            <div class="form__image"></div>
            <!-- 表单Logo -->
            <div class="form__logo" xmlns="http://www.w3.org/2000/svg" width="3044" height="840" viewBox="416.5 656.5 3044 840">
                ESDC
            </div>

            <!-- 手机号 -->
            <div class="input">
                <input id="telephone" type="text" class="input__element" placeholder=" "/>
                <label class="input__label" for="telephone">手机号</label>
            </div>

            <!-- 邮箱 -->
            <div class="input">
                <input id="email" type="text" class="input__element" placeholder=" "/>
                <label class="input__label" for="email">邮箱</label>
            </div>

            <!-- 用户名 -- -->
            <div class="input">
                <input id="username" type="text" class="input__element" placeholder=" "/>
                <label class="input__label" for="username">用户名</label>
            </div>

            <!-- 验证码 -- -->
            <div class="input">
                <input id="captcha" type="text" class="input__element" placeholder=" "/>
                <label class="input__label" for="captcha">验证码</label>
            </div>

            <!-- 验证码图片 -- -->
            <div class="input">
                <div class="captcha">
                    <img style="float: right;" id="checkCodeImage" src="http://localhost:8080/javaweb_project/checkCodeServlet">
                    <button type="button" id="changeImg" onclick="refreshCaptcha()">看不清？</button>
                </div>
            </div>

            <!-- 密码 -- -->
            <div class="input">
                <input id="password" type="password" class="input__element" placeholder=" "/>
                <label class="input__label" for="password">密码</label>
            </div>

            <div class="input">
                <input id="password2" type="password" class="input__element" placeholder=" "/>
                <label class="input__label" for="password2">确认密码</label>
            </div>

            <button type="button" class="button">
                <div class="button__label" onclick="submitRegister()">注册</div>
                <div class="button__icon"></div>
            </button>
            <div class="special-word" style="text-align: right;">
                <a href="javascript:void(0);" onclick="switchTologin()">已有账号，点此登录</a>
            </div>
        </form>
    </div>
</main>

<script src="js/axios-0.18.0.js"></script>
<script src="js/window.js"></script>
<script>
    function submitRegister() {
        const username = document.getElementById('username').value;
        const password = document.getElementById('password').value;
        const password2=document.getElementById('password2').value;
        const captcha = document.getElementById('captcha').value;
        const email=document.getElementById('email').value;
        const telephone=document.getElementById('telephone').value;

        const requestData = `username=${encodeURIComponent(username)}&password=${encodeURIComponent(password)}&password2=${encodeURIComponent(password2)}&captcha=${encodeURIComponent(captcha)}&email=${encodeURIComponent(email)}&telephone=${encodeURIComponent(telephone)}`;

        axios({
            method: "post",
            url: "http://localhost:8080/javaweb_project/user/register",
            headers: {
                "Content-Type": "application/x-www-form-urlencoded"
            },
            data: requestData
        }).then(function (response) {
            // 处理响应
            console.log(response.data);
            if (response.data === 'succeed') {
                alert("注册成功!");
                switchTologin();
            } else if (response.data === 'captchaWrong') {
                document.getElementById("userCaptcha_err").style.display = '';
            } else if (response.data === 'userArExists') {
                document.getElementById("username_err").style.display = '';
            }else if(response.data==='passwordNotSame'){
                alert('密码重新输入有误');
            }else if(response.data==='idOrPwEmpty'){
                alert('账号或密码为空');
            }else if(response.data==='emailIsEmpty'){
                alert('邮箱为空');
            }

        }).catch(function (error) {
            // 处理错误
            console.error('Error during register:', error);
            alert('注册过程中出现了错误，请再试一次!');
        });
    }
    function refreshCaptcha() {
        document.getElementById("checkCodeImage").src = "http://localhost:8080/javaweb_project/checkCodeServlet?" + new Date().getTime();
    }

</script>
</body>
</html>
